1
00:00:00,060 --> 00:00:05,610
OK, așa că vom începe cu aplicația noastră de film și primul lucru pe care vrem să-l facem este HTML,

2
00:00:05,610 --> 00:00:10,120
apoi vom intra în concurs și apoi, în sfârșit, vom începe în JavaScript pentru a extrage datele.

3
00:00:10,590 --> 00:00:13,640
Deci, în indexul nostru, fiecare dintre 12 proiecte încep.

4
00:00:13,650 --> 00:00:21,840
Să schimbăm titlul aici și să apelăm la aplicația film și să schimbăm sau să adăugăm în corpul aici.

5
00:00:21,840 --> 00:00:25,290
Vrem un antet în partea de sus cu un formular.

6
00:00:25,290 --> 00:00:29,970
Voi da acestei forme o idee despre formă și perspectivă aici.

7
00:00:30,030 --> 00:00:31,470
De fapt, nu avem nevoie de o acțiune.

8
00:00:31,600 --> 00:00:32,550
Scapa de asta.

9
00:00:33,450 --> 00:00:36,700
Deci vrem doar o intrare aici, care va fi căutarea noastră.

10
00:00:36,720 --> 00:00:43,890
Îi voi da o idee despre căutare și, de asemenea, o clasă de căutare, și va fi text.

11
00:00:43,890 --> 00:00:48,470
Și apoi să adăugăm și un substituent de căutare, OK?

12
00:00:48,480 --> 00:00:51,510
Și nu voi adăuga un buton, așa că va trebui doar să apăsăm enter.

13
00:00:51,510 --> 00:00:53,210
Dacă doriți să adăugați un buton, puteți.

14
00:00:53,700 --> 00:00:57,300
Dar sub antet, vom avea zona noastră principală.

15
00:00:58,350 --> 00:01:01,650
Și o să-i dau o idee despre principal.

16
00:01:02,220 --> 00:01:08,010
Și, în cele din urmă, asta este tot ce vom avea în HTML-ul nostru, deoarece filmele vor merge și vor merge

17
00:01:08,010 --> 00:01:11,100
pentru a fi inserat în DOM cu JavaScript.

18
00:01:11,100 --> 00:01:17,250
Dar, deocamdată, vom continua și vom codifica codul HTML, astfel încât să-l putem stila astfel încât fiecare să

19
00:01:17,250 --> 00:01:20,940
ai o clasă de film în jurul lui și va avea o imagine.

20
00:01:20,940 --> 00:01:28,260
Și deocamdată am de gând să iau doar o imagine de stoc pe stropire a unor locuri de film și va merge

21
00:01:28,260 --> 00:01:29,760
să preiau totul deocamdată.

22
00:01:30,330 --> 00:01:37,020
Dar sub acea imagine, vom avea un div cu clasa de informații despre liniuța filmului, care se întâmplă

23
00:01:37,020 --> 00:01:38,040
să aibă titlul.

24
00:01:38,190 --> 00:01:44,430
Deci un H3 cu titlul filmului și sub titlul filmului va avea un interval.

25
00:01:44,970 --> 00:01:50,610
Acum aceasta va fi evaluarea și culoarea textului va fi diferită în funcție de

26
00:01:50,610 --> 00:01:51,090
rating.

27
00:01:51,090 --> 00:01:53,240
Deci va fi verde dacă este un rating ridicat.

28
00:01:53,580 --> 00:01:58,410
Cred că este o scară de zece puncte, dar vom spune doar nouă virgulă opt, astfel încât aceasta să aibă o clasă

29
00:01:58,410 --> 00:02:01,020
de verde în JavaScript îl va face dinamic.

30
00:02:01,020 --> 00:02:02,790
Dacă este un rating scăzut, va fi roșu.

31
00:02:03,030 --> 00:02:05,100
Dacă este un rating mediu, va fi portocaliu.

32
00:02:05,670 --> 00:02:09,000
Acum, sub div-ul de informații despre film, vom avea o prezentare generală.

33
00:02:10,350 --> 00:02:11,880
Deci clasa de vedere de ansamblu.

34
00:02:12,330 --> 00:02:19,590
Și aici, va fi doar un H3 cu o vedere de ansamblu ca etichetă.

35
00:02:19,890 --> 00:02:28,100
Și apoi să facem LAAM 20 doar pentru un text fals aici și apoi asta ar trebui să fie pentru film.

36
00:02:28,110 --> 00:02:33,330
Acum vom avea o mulțime de aceste div-uri de filme care vor fi inserate din JavaScript

37
00:02:33,330 --> 00:02:34,800
cu datele API.

38
00:02:34,800 --> 00:02:39,540
Așa că voi copia asta și voi pune încă două div-uri de film aici deocamdată.

39
00:02:39,930 --> 00:02:45,420
Și apoi, în foaia noastră de stil aici, voi folosi fontul Poppins, așa că voi evidenția Raboteau

40
00:02:45,420 --> 00:02:52,260
aici, comandă evidențiată aici și schimbați-o în Poppins apăsați Escape pentru a reveni la cursorul meu de aici

41
00:02:52,710 --> 00:02:55,440
și să folosim 200 400 pentru greutate.

42
00:02:56,940 --> 00:03:01,800
Și în corp putem scăpa de orice, cu excepția familiei de fonturi și a marjei zero.

43
00:03:03,090 --> 00:03:09,630
Bine, pentru că nu folosim Flex pentru, știi, să punem la mijloc așa cum am făcut cu majoritatea proiectelor

44
00:03:09,630 --> 00:03:13,320
pentru că avem un antet, știi, pe care îl vom avea și apoi filmele.

45
00:03:13,860 --> 00:03:21,120
Așa că vreau să adaug o culoare de fundal aici și vom folosi această culoare și alta pe tot parcursul

46
00:03:21,120 --> 00:03:22,230
proiectul.

47
00:03:22,230 --> 00:03:26,310
Deci, le voi pune în proprietăți personalizate în domeniul rădăcină.

48
00:03:26,310 --> 00:03:31,620
Deci, să avem o proprietate personalizată sau o variabilă numită culoarea liniuței primare.

49
00:03:32,130 --> 00:03:38,190
Și asta va fi doi doi doi cinci patru B, asta va fi.

50
00:03:38,190 --> 00:03:45,810
Și apoi vom avea o culoare secundară, care va fi hexazecimală trei șapte trei B șase nouă.

51
00:03:45,810 --> 00:03:47,070
Și să numim asta.

52
00:03:49,260 --> 00:03:54,080
Secundar, OK și apoi culoarea primară aici este va spune var.

53
00:03:54,170 --> 00:03:59,500
Aceasta este sintaxa pentru proprietățile personalizate este var paranteze și apoi orice variabilă.

54
00:04:00,160 --> 00:04:04,320
OK, așa că puteți vedea că acum, în antet, vrem să stilăm asta.

55
00:04:04,320 --> 00:04:15,750
Așadar, antetul, am să adaug niște umplutură, va face umplutură individuală a camerei și voi afișa cea a lui Fleck

56
00:04:16,770 --> 00:04:22,100
și există un singur element Fleck care este forma și vreau să-l aliniez până la dreapta.

57
00:04:22,110 --> 00:04:27,390
So I'm going to use to justify content Fleck's and which will push it all the way over and then let's

58
00:04:27,390 --> 00:04:29,440
stilați caseta de căutare în sine.

59
00:04:31,830 --> 00:04:38,720
Așa că caută, voi seta culoarea de fundal la transparență și hai să setăm chenarul.

60
00:04:39,960 --> 00:04:44,820
Deci chenarul va fi solid de doi pixeli și va fi culoarea secundară.

61
00:04:44,820 --> 00:04:50,490
Deci var liniuță liniuță culoare secundară și de fapt.

62
00:04:50,490 --> 00:04:51,390
Nu, așteptați un minut.

63
00:04:51,750 --> 00:04:52,580
Vrem asta acum.

64
00:04:52,590 --> 00:04:54,270
Vrem culoarea primară pentru asta.

65
00:04:59,390 --> 00:05:00,080
De fapt.

66
00:05:01,950 --> 00:05:03,200
Țineți o secundă.

67
00:05:03,240 --> 00:05:09,000
Antetul, da, antetul, vrem de fapt să avem un fundal de culoare secundară, așa că sunt

68
00:05:09,000 --> 00:05:14,490
o să-l lipesc și să îl schimb în secundar.

69
00:05:14,550 --> 00:05:15,070
Iată-ne.

70
00:05:15,600 --> 00:05:16,030
În regulă.

71
00:05:16,030 --> 00:05:23,720
Deci, vreau, de asemenea, ca raza graniței să fie de 50 de pixeli pentru formularul de căutare.

72
00:05:24,450 --> 00:05:29,900
Și să ne asigurăm că moștenim patru familii de fonturi.

73
00:05:29,910 --> 00:05:38,760
We want to inherit our Poppins font, and then I'm going to increase the font size to one room and I'm

74
00:05:38,760 --> 00:05:40,200
voi adăuga niște umplutură.

75
00:05:40,890 --> 00:05:45,540
Așa că vom face punctul cinci de sus și de jos o cameră, la stânga și la dreapta.

76
00:05:46,020 --> 00:05:52,060
Și culoarea textului pe care îl introducem va fi albă și asta ar trebui să facă acest lucru.

77
00:05:52,080 --> 00:05:54,150
De asemenea, vreau să schimb culoarea substituentului.

78
00:05:54,150 --> 00:05:57,410
Deci căutați două puncte, substituent de două puncte.

79
00:05:58,050 --> 00:05:59,460
Să facem acea culoare.

80
00:06:01,140 --> 00:06:07,200
Acesta va fi de fapt un șapte trei șapte opt SI cinci.

81
00:06:08,370 --> 00:06:15,290
OK, așa că pot vedea că are acea culoare violet și pentru focalizare, deci să spunem căutează focalizarea două puncte.

82
00:06:16,170 --> 00:06:19,410
Deci, când facem clic în interiorul acestuia, vreau să elimin orice contur.

83
00:06:19,410 --> 00:06:20,970
Deci schița nu va fi niciuna.

84
00:06:21,210 --> 00:06:27,000
Dar vreau să schimb și culoarea de fundal pentru a fi culorile primare până acum.

85
00:06:27,780 --> 00:06:29,570
liniuță, liniuță, culori primare.

86
00:06:29,640 --> 00:06:32,910
Dacă dau clic aici, puteți vedea că capătă acea culoare de fundal.

87
00:06:33,270 --> 00:06:35,400
Bine, acum hai să facem zona de film.

88
00:06:35,460 --> 00:06:37,920
La fel și zona principală, ar trebui să spun.

89
00:06:37,920 --> 00:06:45,450
Deci, pentru Main, voi afișa Flex pentru că amintesc toate div-urile cu clasa de filme, acelea

90
00:06:45,450 --> 00:06:47,670
vor fi elemente flexibile în Mane.

91
00:06:47,880 --> 00:06:49,740
Deci îl va transforma într-un rând flexibil.

92
00:06:49,950 --> 00:06:52,320
Și vreau să treacă pe linia următoare.

93
00:06:52,320 --> 00:07:00,900
Așa că Flex Wrap va seta să înfășoare și apoi o să prind imaginea, astfel încât fiecare div să aibă o clasă de film

94
00:07:00,900 --> 00:07:02,520
și atunci avem o imagine înăuntru.

95
00:07:02,760 --> 00:07:08,520
Vreau ca acesta să fie 100 la sută din containerul său, care chiar acum merge până la capăt.

96
00:07:08,910 --> 00:07:14,370
Dar să setăm filmul astfel încât fiecare clasă de film să aibă o lățime de trei sute de pixeli.

97
00:07:15,330 --> 00:07:15,840
În regulă.

98
00:07:15,840 --> 00:07:22,320
Și apoi vom continua și vom adăuga o marjă de un berbec pentru a le separa.

99
00:07:22,320 --> 00:07:27,030
De asemenea, voi face înapoi pentru o culoare de fundal.

100
00:07:27,030 --> 00:07:29,250
O voi seta pe culoarea secundară.

101
00:07:29,250 --> 00:07:35,940
So var dash dash secondary color and we'll add a little box shadow.

102
00:07:37,170 --> 00:07:46,800
Deci, umbra casetei pentru decalaje va face zero pentru pixel cu pixel estompare arga negru și zero punct doi pentru

103
00:07:46,800 --> 00:07:47,370
alfa.

104
00:07:47,370 --> 00:07:53,130
So it gives it a little bit of a shadow and I'm going to position this relative so that we can position

105
00:07:53,130 --> 00:07:54,450
alte lucruri în interiorul ei.

106
00:07:54,450 --> 00:07:55,200
Absolut.

107
00:07:55,530 --> 00:08:06,960
Voi seta overflow-ul ca ascuns și voi seta raza graniței la trei pixeli, astfel încât să fie

108
00:08:06,960 --> 00:08:08,160
doar ușor rotunjite.

109
00:08:09,730 --> 00:08:21,990
OK, acum informațiile despre film sunt titlul și evaluarea, așa că informațiile despre film de clasă și voi schimba mai întâi

110
00:08:21,990 --> 00:08:28,050
culoarea, faceți-o mai strălucitoare și vreau să afișez Flex pentru că vreau să fie, știți, titlul

111
00:08:28,050 --> 00:08:29,640
aici în rating de aici.

112
00:08:30,000 --> 00:08:36,300
Deci, dacă afișăm Flex și să luăm oricare.

113
00:08:38,960 --> 00:08:50,060
Let's see, let's take the margin top off of the heading, so movie info three, that set margin top

114
00:08:50,060 --> 00:08:51,930
la zero așa.

115
00:08:52,340 --> 00:08:52,760
În regulă.

116
00:08:52,760 --> 00:08:59,580
Deci avem flexibilitate de afișare, să plasăm elementele rând în centru și să justificăm conținutul.

117
00:08:59,600 --> 00:09:05,090
Vreau să pun spațiu, spațiu suplimentar între ele, astfel încât să împingă ratingul până la capăt.

118
00:09:05,570 --> 00:09:15,140
Și apoi pentru umplutură, să facem zero virgulă cinci berbec, un berbec și apoi un berbec și pe partea de jos.

119
00:09:18,180 --> 00:09:26,580
În regulă, și apoi voi adăuga doar spațierea dintre litere aici și vom face punctul jumătate a

120
00:09:26,580 --> 00:09:28,170
pixel, punctul cinci pixel.

121
00:09:30,930 --> 00:09:34,920
Bine, acum, ce ar trebui să facem în continuare aici?

122
00:09:35,550 --> 00:09:41,970
Intervalul, care este ratingul pe care îl va avea aici, vom avea posibilitatea de a adăuga separat

123
00:09:41,970 --> 00:09:46,080
clase în funcție de, știi, cât de mare sau scăzută este ratingul.

124
00:09:46,090 --> 00:09:47,280
Deci avem nevoie de aceste clase.

125
00:09:47,280 --> 00:09:50,180
Dar clasa de bază sau elementul de bază.

126
00:09:50,190 --> 00:09:58,320
Așadar, informațiile despre film se potrivesc, să adăugăm o culoare de fundal și asta va fi pentru interval.

127
00:09:58,320 --> 00:10:04,740
Să facem VARE și vom folosi culoarea noastră primară așa.

128
00:10:04,740 --> 00:10:05,910
Și să stabilim.

129
00:10:06,900 --> 00:10:15,040
Câteva umplutură pe asta, așa că vom face punctul cinci de sus și de jos, punctul cinci de la stânga și la dreapta.

130
00:10:15,840 --> 00:10:16,290
Bun.

131
00:10:16,440 --> 00:10:24,980
Să setăm o rază a marginii de trei pixeli și apoi să setăm greutatea fontului la aldine.

132
00:10:26,130 --> 00:10:27,490
OK, deci acesta este ratingul nostru.

133
00:10:29,230 --> 00:10:32,240
Acum vrem diferitele clase de culori.

134
00:10:32,250 --> 00:10:33,720
Deci haideți să luăm asta.

135
00:10:33,720 --> 00:10:39,840
Și să spunem că dacă are o clasă de verde, să setăm culoarea la verde.

136
00:10:41,490 --> 00:10:43,510
De fapt, e puțin prea întunecat.

137
00:10:43,530 --> 00:10:44,130
Să facem.

138
00:10:46,960 --> 00:10:55,420
Este verde deschis, cum ar fi, știi, putem face asta, și apoi să luăm asta, vrem trei

139
00:10:55,420 --> 00:11:04,990
dintre acestea și al doilea aici va fi portocaliu și vom seta această culoare la portocaliu.

140
00:11:05,650 --> 00:11:12,700
Și apoi acesta de aici va fi roșu și îl va seta pe acesta la roșu.

141
00:11:12,850 --> 00:11:19,030
În acest moment, dacă una dintre aceste evaluări, cum ar fi, să spunem că ultima este trei virgulă opt și noi

142
00:11:19,030 --> 00:11:22,430
setați clasa la roșu, apoi va avea o colorare roșie.

143
00:11:23,950 --> 00:11:26,530
Acum, ultima parte a acesteia este prezentarea generală.

144
00:11:26,800 --> 00:11:31,330
Iar imaginea de ansamblu va fi partea albă pe care, atunci când trecem cu mouse-ul peste, o să știți, este

145
00:11:31,330 --> 00:11:33,060
urmează să urce de jos.

146
00:11:33,070 --> 00:11:34,960
Deci vrem să adăugăm o tranziție la asta.

147
00:11:35,470 --> 00:11:37,920
Dar să facem mai întâi o privire de ansamblu.

148
00:11:39,820 --> 00:11:48,220
Așa că voi seta culoarea de fundal la alb în prezentarea generală și hai să setăm niște umplutură, astfel încât să nu fie

149
00:11:48,340 --> 00:11:51,010
sus împotriva părților laterale va face la unele căptușeală.

150
00:11:51,430 --> 00:11:54,180
Vom poziționa asta ca să fie absolut.

151
00:11:54,580 --> 00:12:04,300
Și din câte știți, unde vrem să poziționăm asta, să facem sus, sus, stânga, sus, zero, jos

152
00:12:05,050 --> 00:12:09,760
zero și dreapta zero.

153
00:12:09,770 --> 00:12:11,950
Îmi pare rău, nu în stânga sus.

154
00:12:12,390 --> 00:12:14,740
Deci vrem stânga și dreapta, zero și jos.

155
00:12:15,250 --> 00:12:15,670
În regulă.

156
00:12:15,680 --> 00:12:16,990
Deci ar trebui să arate așa.

157
00:12:18,730 --> 00:12:19,420
Și apoi.

158
00:12:21,760 --> 00:12:26,230
Yeah, and then I'm going to set a max height of one hundred percent.

159
00:12:27,340 --> 00:12:33,850
OK, acum nu vrem ca asta să arate inițial ceea ce vreau să fac este să-l împins până la capăt.

160
00:12:33,850 --> 00:12:40,570
a casetei și apoi, când trecem cu mouse-ul, apare în sus, trece în sus, astfel încât să o putem muta în jos cu transformare

161
00:12:40,570 --> 00:12:46,270
și apoi putem folosi translate whi, care îl traduce sau îl mută pe axa Y și vreau să îl mutăm

162
00:12:46,270 --> 00:12:48,280
jos, deci va fi un număr pozitiv.

163
00:12:49,270 --> 00:12:51,450
Vom face 101 la sută.

164
00:12:51,460 --> 00:12:56,620
Deci 100 la sută din înălțimea sa plus încă un procent, ceea ce o va muta până la capăt.

165
00:12:56,620 --> 00:13:02,680
Dacă setez acest lucru la 50 la sută, îl va împinge cu 50 la sută în jos, dar vrem să înceapă în afara ecranului

166
00:13:02,680 --> 00:13:08,050
cu și apoi când îl plasăm, așa că vom spune trecerea cu mouse-ul.

167
00:13:09,100 --> 00:13:10,270
Îmi pare rău, nu o privire de ansamblu.

168
00:13:10,270 --> 00:13:11,520
Totuși, vrem film.

169
00:13:11,980 --> 00:13:19,960
Deci, când trecem cu mouse-ul peste un film, care este întreaga casetă, atunci vrem ca imaginea de ansamblu să se schimbe

170
00:13:19,960 --> 00:13:26,410
transformarea sa traduce de ce la zero, care este poziționarea sa inițială.

171
00:13:26,800 --> 00:13:31,120
Acum, dacă trec cu mouse-ul peste, îl puteți vedea, face asta, dar nu există încă nicio tranziție.

172
00:13:31,120 --> 00:13:33,370
Deci, să adăugăm o tranziție la asta.

173
00:13:33,880 --> 00:13:37,360
Vrem tranziție și vrem tranziție.

174
00:13:37,360 --> 00:13:44,050
Proprietatea de transformare va dura zero virgulă trei secunde și vom face o ușurință în efect.

175
00:13:44,350 --> 00:13:48,850
Așa că atunci când trec cu mouse-ul peste el, alunecă în sus, ceea ce vreau.

176
00:13:49,180 --> 00:13:55,210
OK, așa că acum că avem designul, următorul videoclip va intra în scenariul nostru J.S. și trageți

177
00:13:55,210 --> 00:14:02,410
în datele din API folosind fetch și apoi inserați aceste carduri cu datele dinamice ale filmului.